<template>
<div class="Myadd-wrap">
    <mt-navbar v-model="selected" class="myadd-navbar">
        <mt-tab-item id="1">预约服务地址</mt-tab-item>
        <mt-tab-item id="2">管家服务地址</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-if="this.commonAddress" v-model="selected" >
        <mt-tab-container-item id="1">
            <div class="myaddress-wrap">
                <ul class="address-list">
                    <li v-for="(item,index) in this.commonAddress" :key="item.id">
                        <div @click="checChoose(item)" class="addMore">
                            <div class="add01">
                                <span>联系人：{{ item.userName }}</span>
                                <span>{{ item.mobileNo }}</span>
                            </div>
                            <p>服务地址：{{ item.address }}</p>
                        </div>
                        <div class="add02">
                            <div @click="check(index)">
                                <input type="checkbox" :disabled="true" v-model="item.status" :class="{'on' : item.status}">
                                <label>默认地址</label>
                            </div>
                            <div>
                                <button @click="addaddEdit(index)">编辑</button>
                                <button @click="del(item)">删除</button>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="addadd">
                    <button @click="addaddAddress()">添加地址</button>
                </div>
                <div class="addressBtn">
                    <!-- <button class="active">确认</button> -->
                    <button  @click="addselectSure"> ＜＜ 返回</button>
                </div>
                <!-- 地址组件 -->
                <mt-popup class="add-popup"  v-model="popupVisible2" position="right" :modal="false">
                    <Address @close="close" @clearAddress="clearAddress" :address="this.commonAddress[index]"></Address>
                </mt-popup>
            </div>   
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
            <ul class="address-list">
                    <li v-for="(item,index) in this.serviceAddress" :key="index">
                        <div @click="checChoose(item)" class="addMore">
                            <div class="add01">
                                <span>联系人：{{ item.userName }}</span>
                                <span>{{ item.mobileNo }}</span>
                            </div>
                            <p>服务地址：{{ item.address }}</p>
                        </div>
                        <div class="add02 add02Guanjia">
                            <p>* 该管家服务地址不可手动更改，如需更改请联系客服进行更改哦</p>
                        </div>
                    </li>
                </ul>
        </mt-tab-container-item>
    </mt-tab-container> 
</div>
</template>

<script>
import { mapState,mapActions } from 'vuex'
import Address from '@/components/Address.vue'
export default {
    created(){
        this.getServiceAddress();
        this.getCommonAddress();
    },
    data(){
        return{
            index:'',
            selected: '1',
            popupVisible2: false
        }
    },
    components:{
        Address
    },
    computed:{
        ...mapState({
            serviceAddress:state => state.personModules.serviceAddress,
            commonAddress:state => state.personModules.commonAddress,
        })        
    },
    methods:{
        ...mapActions({
            getCommonAddress:'personModules/getCommonAddress',
            getServiceAddress:'personModules/getServiceAddress',
            delCommonAddress:'personModules/delCommonAddress',
        }),
        addselectSure(){
            this.$emit('closePop');
        },
        check(index){
            if(!this.addresslist){
                return;
            }
            this.addresslist.forEach((address) => {
                address.status = false
            })
            this.addresslist[index].status = true
        },
        checChoose (item) {
            this.$emit('checkChoose',item)
        },
        close(){
            this.popupVisible2 = false
            this.index = '';
        },
        del(item){
            this.delCommonAddress({addressId:item.addressId});
        },
        addaddAddress(){
            this.popupVisible2 = true
            this.commonAddress[''] = {};

        },
        clearAddress(){
            this.index = '';
        },
        addaddEdit(index){
            this.popupVisible2 = true,
            this.index = index
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/style/order.scss";
.mint-popup {
    width: 88% !important;
    margin: 0 auto;
}
.addadd {
    text-align: right;
    padding: 10px 15px;
    button {
        background: none;
        border: none;
        color: #ff5622;
        text-decoration: underline;
        font-size: 16px;
    }
}
.mint-navbar .mint-tab-item{
    font-size: 16px;
    &.is-selected {
        color: #ff5622;
        border-color: #ff5622;
        margin-bottom: 0;
    }
}
.add02Guanjia {
    color: #ff5622;
}
</style>

<style>
.dizhicomponent{
    width: 100% !important;
    height: 100% !important;
}
.Myadd-wrap{
    overflow-y: scroll;
    height: 100%;
    background: #F6F5F5;
}
.add-popup.mint-popup{
    width: 100% !important;
    height: 100% !important;
}
.myadd-navbar .mint-tab-item-label{
    font-size: 16px;
}
</style>



